<template>
  <div class="employee-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.workId"
          placeholder="职工号"
          style="width: 120px"
          class="filter-item"
        />
        <el-input
          v-model="filter.name"
          placeholder="职工姓名"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
        />
        <el-button type="primary" style="margin-left: 10px" @click="handleSearch">
          搜索
        </el-button>
        <el-button plain style="margin-left: 15px; border-style: dashed" @click="resetFilter">
          重置
        </el-button>
      </div>
  
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="text" icon="el-icon-circle-plus" @click="handleAdd">新增</el-button>
      </div>
  
      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        header-row-class-name="table-header"
      >
        <!-- 表格列保持不变 -->
        <el-table-column type="selection" width="45" align="center"/>
        <el-table-column label="职工号 ▲" width="120" sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.workId }}</span>
            <i class="el-icon-caret-top" style="color: #409EFF; margin-left: 3px"></i>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="职工姓名" width="120"/>
        <el-table-column prop="gender" label="职工性别" width="100" align="center"/>
        <el-table-column prop="birthdate" label="出生日期" width="120"/>
        <el-table-column prop="department" label="所在系" width="200"/>
        <el-table-column prop="title" label="职称" width="120"/>
        <el-table-column prop="expertise" label="技术专长" width="150"/>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button 
              type="text" 
              size="mini" 
              style="margin-left: 10px"
              @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页信息 -->
      <div class="pagination-info">
        第1 期3 条，共3 条记录。
      </div>
  
      <!-- 新增/编辑对话框 -->
      <el-dialog 
        :title="formTitle" 
        :visible.sync="dialogVisible" 
        width="600px"
        @close="resetForm">
        <el-form :model="form" label-width="80px">
          <el-form-item label="职工号">
            <el-input v-model="form.workId" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.gender" placeholder="请选择">
              <el-option label="男" value="男"/>
              <el-option label="女" value="女"/>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
              v-model="form.birthdate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="所在系">
            <el-input v-model="form.department"/>
          </el-form-item>
          <el-form-item label="职称">
            <el-input v-model="form.title"/>
          </el-form-item>
          <el-form-item label="技术专长">
            <el-input v-model="form.expertise"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        filter: {
          workId: '',
          name: '',
          department: '无'
        },
        tableData: [
          {
          workId: '53',
          name: '马行健',
          gender: '男',
          birthdate: '2020-01-16',
          department: '计算机科学与技术',
          title: '助教',
          expertise: '大学语文'
          },
          {
          workId: '54',
          name: '董理',
          gender: '男',
          birthdate: '2020-01-08',
          department: '计算机科学与技术',
          title: '教授',
          expertise: '高等数学'
          },
          {
          workId: '55',
          name: '杜金',
          gender: '男',
          birthdate: '2020-01-10',
          department: '计算机科学与技术',
          title: '教授',
          expertise: '大学物理'
          }
        ],
        dialogVisible: false,
        formTitle: '新增职工',
        currentIndex: -1,
        form: {
          workId: '',
          name: '',
          gender: '',
          birthdate: '',
          department: '',
          title: '',
          expertise: ''
        }
      }
    },
    methods: {
      // 搜索功能
      handleSearch() {
        this.tableData = this.originalData.filter(item => {
          return (!this.filter.workId || item.workId.includes(this.filter.workId)) &&
                 (!this.filter.name || item.name.includes(this.filter.name))
        })
      },
      
      // 重置筛选
      resetFilter() {
        this.filter.workId = ''
        this.filter.name = ''
        this.tableData = this.originalData
      },
      
      // 新增
      handleAdd() {
        this.formTitle = '新增职工'
        this.dialogVisible = true
      },
      
      // 编辑
      handleEdit(index, row) {
        this.formTitle = '编辑职工信息'
        this.currentIndex = index
        this.form = Object.assign({}, row)
        this.dialogVisible = true
      },
      
      // 删除
      handleDelete(index, row) {
        this.$confirm('确认删除该职工信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1)
          this.$message.success('删除成功!')
        })
      },
      
      // 提交表单
      submitForm() {
        if (this.currentIndex === -1) {
          // 新增
          this.tableData.push({...this.form})
        } else {
          // 编辑
          this.$set(this.tableData, this.currentIndex, {...this.form})
        }
        this.dialogVisible = false
        this.$message.success('操作成功!')
      },
      
      // 重置表单
      resetForm() {
        this.form = {
          workId: '',
          name: '',
          gender: '',
          birthdate: '',
          department: '',
          title: '',
          expertise: ''
        }
        this.currentIndex = -1
      }
    },
    created() {
      // 保存原始数据副本
      this.originalData = JSON.parse(JSON.stringify(this.tableData))
    }
  }
  </script>
  
  <!-- 保持原有样式不变 -->
  